<template>

    <div>

    <div style="margin-bottom:15px;">
        <router-link to="/admin/edit_hotel"><el-button type="primary">添加酒店</el-button></router-link>
    </div>

    <el-table
    v-loading="loading"
    :data="data"
    style="width: 100%">
    <el-table-column
      label="id"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.h_id }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="酒店名称">
      <template slot-scope="scope">
          {{ scope.row.h_name }}
      </template>
    </el-table-column>

    <el-table-column
      label="酒店图片"
      width="180">
      <template slot-scope="scope">
          <img class="icon_img" :src="scope.row.h_icon"/>
      </template>
    </el-table-column>

    <el-table-column
      label="酒店地址"
      >
      <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
          <p>详细住址: {{ scope.row.h_address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.h_areaText.join(',') }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column
      label="酒店价格"
      width="180">
      <template slot-scope="scope">
          {{ scope.row.h_money }}元/晚
      </template>
    </el-table-column>

    <el-table-column label="操作" width="180">
      <template slot-scope="scope">
        <router-link :to='"/admin/edit_hotel?id="+scope.row.h_id'>
            <el-button size="mini">编辑</el-button>
        </router-link>
        <el-button
          size="mini"
          type="danger"
          @click="dele(scope.row.h_id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <el-pagination
        v-if="allpage>1"
        style="margin-top:10px"
        background
        layout="prev, pager, next"
        :total="count"
        :page-size="pagesize"
        @current-change="changePage"
        >
    </el-pagination>

    </div>

</template>

<style scoped>
    img.icon_img{
        width: 85px;
        height: 100px;
    }
</style>

<script>
export default {
    data(){

        return {
            data: [],
            page: 1,
            count: 0,
            pagesize:10,
            allpage:0,
            loading: false
        }

    },
    methods:{

        getData(){

            this.loading = true

            let that = this

            this.$axios.post('/admin.php/hotel',this.$qs.stringify({page:this.page})).then( (res) => {

                that.loading = false

                if(res.data.code==1){

                    that.data = res.data.data.data

                    that.count = res.data.data.count

                    that.pagesize = res.data.data.pagesize

                    that.allpage = res.data.data.allpage

                    if(res.data.data.page<res.data.data.allpage){

                        that.page = res.data.data.page+1

                    }

                }else{

                    that.$message.error(res.data.msg)

                }

            } ).catch( (err) => {

                 that.loading = false

                that.$message.error('网络繁忙~')

            } )

        },
        changePage(page=1){

            this.page = page

            this.getData()

        },
        dele(id=null){

            let that = this

            this.$confirm('确定要删除该条数据吗？','删除提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then( () => {

                this.$axios.post('/admin.php/hotel/dele',this.$qs.stringify({id:id})).then( (res) => {

                    if(res.data.code==1){

                        that.getData()

                        that.$message({
                            message: '删除成功~',
                            type: 'success'
                        });

                    }else{

                        that.$message.error(res.data.msg)

                    }

                } ).catch( (err) => {

                    that.$message.error('网络繁忙~')

                } )

            } ).catch( () => {} )

            

        }

    },
    created(){

        this.getData()

    }
}
</script>
